<template>
    <div class="login-box">
        <div class="choose">
            <span :class="[isChose==='Log in'?'isChose':'']" @click="isChose = 'Log in'">Log in</span>
            <span :class="[isChose==='Sign up'?'isChose':'']" @click="isChose = 'Sign up'">Sign up</span>
        </div>
        <div v-show="isChose==='Sign up'" class="sig-up">
            <div>
                <div class="name">
                    <span>姓名 :</span>
                    <input type="text">
                </div>
                <div class="class">
                    <span>班级 :</span>
                    <input type="text">
                </div>
            </div>
            <div class="id">
                <p><span>学号 :</span></p>
                <input v-model="account" type="text">
            </div>
            <div class="pwd">
                <p><span>密码 :</span></p>
                <input v-model="password" type="password">
            </div>
        </div>
        <div v-show="isChose==='Log in'" class="login">
            <div class="id">
                <p><span>账号 :</span></p>
                <input v-model="account" type="text">
            </div>
            <div class="pwd">
                <p><span>密码 :</span></p>
                <input v-model="password" type="password">
            </div>
        </div>
        <button @click="login">{{ isChose }}</button>
    </div>
</template>

<script setup>
import { onBeforeMount, ref } from "vue";


// 控制登录与注册选项
let isChose = ref("Log in")
import { useUserStore } from "@/stores/user/user";
const user = useUserStore()
// 发送登录请求
import loginApi from "@/http/login/loginApi"; // 发送请求api
import router from "@/router"; // 存储token
const props = defineProps(['options']) // 获取当前为学生还是教师或者管理员

let account = ref("")
let password = ref("")

function login() {
    if (props.options === "管理员") {
        window.open("http://10.82.11.128:9207/admin")
    }
    let url = props.options === "学生" ? "student_login" : (props.options === "教师" ? "teacher_login" : "");
    loginApi.post(url, {
        account: account.value,
        password: password.value
    }).then((res) => {
        if (res["msg"]) {
            user.setToken(res["token"])
            user.setIsLogin(true)
            user.setInfo("identity",res["info"])
            router.push("/")
        }
    })
}



</script>

<style scoped lang="less">
.login-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 384px;
    background-color: rgba(255, 255, 255, .2);
    backdrop-filter: blur(4px);
    border-radius: 20px;
    transition: 0.2s;
    padding: 20px 0;
    color: black;
    .choose {
        display: flex;
        width: 310px;
        height: 56px;
        margin: 0 auto 30px auto;
        text-align: center;
        line-height: 56px;
        border-radius: 20px;
        background-color: rgba(255, 255, 255, .2);
        backdrop-filter: blur(4px);

        span {
            flex: 1;
            transition: all 0.3s;
        }

        .isChose {
            background-color: white;
            border-radius: 20px;
        }
    }

    .sig-up {
        display: flex;
        flex-wrap: wrap;
        width: 310px;
        margin: 0 auto;
        color: #3d3b3b;

        > div {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 310px;
            margin: 5px 0;

            p {
                width: 279px;
            }
        }

        input {
            width: 90%;
            height: 40px;
            border-radius: 15px;
            background-color: #b2b5b9;
        }

        > div:nth-child(1) {
            display: flex;
            flex-direction: row;
            justify-content: space-around;

            div {
                width: 124px;
            }

            input {
                width: 100%;
            }
        }
    }

    .login {
        display: flex;
        flex-wrap: wrap;
        width: 310px;
        margin: 0 auto;
        color: #3d3b3b;

        div {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 310px;
            height: 64px;
            margin: 5px 0;

            p {
                width: 279px;
            }
        }

        input {
            width: 90%;
            height: 40px;
            border-radius: 15px;
            background-color: #b2b5b9;
        }
    }

    button {
        width: 230px;
        height: 50px;
        margin-top: 40px;
        border-radius: 20px;
        background-color: #c3c3c3;
    }
}
</style>